<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="renderer" content="webkit" />

    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Expires" content="-1"/>

    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <title>H5图片裁剪</title>
    <link rel="shortcut icon" href="/favicon.ico"/>

    <style type="text/css" id="style">
    </style>

</head>
<body>
    <div class="content">
        <div class="canvasBox"><canvas id="canvas01"></canvas></div>
        <div id="imgClipperImgBox" class="imgBox displayFlex hide"><img id="img" src=""/></div>
        <div class="toolBox">
            <div class="inBox">
                <div class="fileIn">
                    <label>
                        <span id="imgClipperAdd">选择图片</span>
                        <input id="imgClipperFile" type="file" capture="camera" class="inFile" />
                    </label>
                </div>
                <div>
                    <a id="imgClipperSave" href="javascript:;" class="disable">保存图片</a>
                </div>
                <a href="javascript:;" id="rotateBtn" class="rotateBtn">旋转</a>
            </div>
        </div>
        <div style="display: none;">
            <p id="log2"></p>
            <p id="log"></p>
        </div>
    </div>


    <script type="text/javascript" src="./dist/index_imgClipper.js"></script>
</body>
</html>
